<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Select - Single Value</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Select Item: Single Value</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="outer-content">
      <ion-item>
        <ion-label position="stacked">Gender</ion-label>
        <ion-select id="gender">
          <ion-select-option value="f">Female</ion-select-option>
          <ion-select-option value="m">Male</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Popover</ion-label>
        <ion-select interface="popover">
          <ion-select-option value="select">Select</ion-select-option>
          <ion-select-option value="action">Action Sheet</ion-select-option>
          <ion-select-option value="popover">Popover</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Gaming</ion-label>
        <ion-select id="gaming">
          <ion-select-option value="nes">NES</ion-select-option>
          <ion-select-option value="n64">Nintendo64</ion-select-option>
          <ion-select-option value="ps">PlayStation</ion-select-option>
          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
          <ion-select-option value="snes">SNES</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label position="floating">Operating System</ion-label>
        <ion-select id="os">
          <ion-select-option value="dos">DOS</ion-select-option>
          <ion-select-option value="lunix">Linux</ion-select-option>
          <ion-select-option value="mac7">Mac OS 7</ion-select-option>
          <ion-select-option value="mac8">Mac OS 8</ion-select-option>
          <ion-select-option value="win3.1">Windows 3.1</ion-select-option>
          <ion-select-option value="win95">Windows 95</ion-select-option>
          <ion-select-option value="win98">Windows 98</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Notifications</ion-label>
        <ion-select id="notifications">
          <ion-select-option value="enable">Enable</ion-select-option>
          <ion-select-option value="mute">Mute</ion-select-option>
          <ion-select-option value="mute_week">Mute for a week</ion-select-option>
          <ion-select-option value="mute_year" (ionSelect)="notificationSelect($event)">Mute for a year</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Edit</ion-label>
        <ion-select>
          <ion-select-option value="add_reaction">Add Reaction</ion-select-option>
          <ion-select-option value="copy_text">Copy Text</ion-select-option>
          <ion-select-option value="share_text">Share Text</ion-select-option>
          <ion-select-option value="copy_link">Copy Link to Message</ion-select-option>
          <ion-select-option value="remind_me">Remind Me</ion-select-option>
          <ion-select-option value="pin_file">Pin File</ion-select-option>
          <ion-select-option value="star_file">Star File</ion-select-option>
          <ion-select-option value="mark_unread">Mark Unread</ion-select-option>
          <ion-select-option value="edit_title">Edit Title</ion-select-option>
          <ion-select-option value="save_image">Save Image</ion-select-option>
          <ion-select-option value="copy_image">Copy Image</ion-select-option>
          <ion-select-option value="delete_file">Delete File</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Music</ion-label>
        <ion-select id="music" placeholder="Select Music">
          <ion-select-option>Alice in Chains</ion-select-option>
          <ion-select-option>Green Day</ion-select-option>
          <ion-select-option>Nirvana</ion-select-option>
          <ion-select-option>Pearl Jam</ion-select-option>
          <ion-select-option>Smashing Pumpkins</ion-select-option>
          <ion-select-option>Soundgarden</ion-select-option>
          <ion-select-option (ionSelect)="musicSelect($event)">Stone Temple Pilots</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Date</ion-label>
        <ion-select id="month">
          <ion-select-option value="01">January</ion-select-option>
          <ion-select-option value="02">February</ion-select-option>
          <ion-select-option value="03">March</ion-select-option>
          <ion-select-option value="04">April</ion-select-option>
          <ion-select-option value="05">May</ion-select-option>
          <ion-select-option value="06">June</ion-select-option>
          <ion-select-option value="07">July</ion-select-option>
          <ion-select-option value="08">August</ion-select-option>
          <ion-select-option value="09">September</ion-select-option>
          <ion-select-option value="10">October</ion-select-option>
          <ion-select-option value="11">November</ion-select-option>
          <ion-select-option value="12">December</ion-select-option>
        </ion-select>
        <ion-select id="year">
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Statuses</ion-label>
        <ion-select id="status" value="selected">
          <ion-select-option value="selected">Selected</ion-select-option>
          <ion-select-option value="default">Default</ion-select-option>
          <ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item>
        <ion-label>Currency</ion-label>
        <ion-select id="currency">
        </ion-select>
      </ion-item>

      <ion-button onclick="resetGender()">Reset Gender</ion-button>

      <p aria-hidden="true" class="ion-padding">
        <code>gender: <span id="genderResult"></span></code>
        <br>
        <code>gaming: <span id="gamingResult"></span></code>
        <br>
        <code>os: <span id="osResult"></span></code>
        <br>
        <code>notifications: <span id="notificationsResult"></span></code>
        <br>
        <code>music: <span id="musicResult"></span></code>
        <br>
        <code>date: <span id="monthResult"></span>/<span id="yearResult"></span></code>
        <br>
        <code>status: <span id="statusResult"></span></code>
        <br>
        <code>currency: <span id="currencyResult"></span></code>
        <br>
      </p>
    </ion-content>

    <style>
      .outer-content {
        --background: #f2f2f2;
      }
    </style>

    <script>
      customElements.whenDefined('ion-select-option').then(() => {
        let selects = document.querySelectorAll('ion-select');
        selects.forEach(function (select) {
          select.addEventListener("ionChange", function () {
            setResults(select);
          });
        });

        function setResults(select) {
          if (select.id) {
            var resultsEl = document.getElementById(select.id + 'Result');
            if (resultsEl) {
              var value = typeof select.value === 'object' ? JSON.stringify(select.value) : select.value;
              resultsEl.innerHTML = value;
            }
          }
        }

        var os = document.getElementById('os');
        os.value = 'win3.1';
        setResults(os);

        var month = document.getElementById('month');
        month.value = '12';
        setResults(month);

        var year = document.getElementById('year');

        var years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];

        for (var i = 0; i < years.length; i++) {
          var option = document.createElement('ion-select-option');
          option.value = option.innerHTML = years[i];

          year.appendChild(option);
        }

        year.componentOnReady().then(() => {
          year.value = 1994;
        });

        setResults(year);

        var currencies = [
          {
            symbol: '$',
            code: 'USD',
            name: 'US Dollar'
          },
          {
            symbol: '€',
            code: 'EUR',
            name: 'Euro'
          },
          {
            symbol: '£',
            code: 'FKP',
            name: 'Falkland Islands Pound'
          },
          {
            symbol: '¢',
            code: 'GHS',
            name: 'Ghana Cedi'
          }
        ];
        var currency = document.getElementById('currency');

        for (var i = 0; i < currencies.length; i++) {
          var option = document.createElement('ion-select-option');
          option.value = currencies[i];
          option.innerHTML = `${currencies[i].symbol} (${currencies[i].code}) ${currencies[i].name}`;

          currency.appendChild(option);
        }
        currency.value = currencies[0];
        currency.selectedText = getCurrencySelectedText();
        setResults(currency);

        currency.addEventListener('ionChange', function (ev) {
          currency.selectedText = getCurrencySelectedText();
        });

        function getCurrencySelectedText() {
          return currency.value.symbol;
        }
      });
      function resetGender() {
        var gender = document.getElementById('gender');
        gender.value = null;
      }
    </script>
  </ion-app>
</body>

</html>
